<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">全域违章监管系统</h3>
      </div>

      <el-form-item prop="phone">
        <el-input
          ref="phone"
          v-model="loginForm.phone"
          placeholder="请输入手机号"
          name="phone"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="code">
        <el-input
          ref="code"
          v-model.number="loginForm.code"
          placeholder="请输入验证码"
          name="code"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        >
					<el-button slot="suffix" :disabled="disabled" @click="getCode">
						<span class="Time">{{btnTxt}}</span>
					</el-button>
        </el-input>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

    </el-form>
  </div>
</template>

<script>
import { getPhoneCode } from '@/api/utils/index'
import { getInfo } from '@/api/user'

const pathList = [
  '/project/list',
  '/survey/l/list',
  '/survey/p/process',
  '/scheme/l/list',
  '/scheme/p/process',
  '/jobTicket/l/list',
  '/jobTicket/p/process',
  '/video/list',
  '/setting/user'
  ]
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        phone: null,
        code: null
      },
      loginRules: {
        phone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur'},
					{
						pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						message: "请输入正确格式手机号",
						trigger: "blur",
					},
				],
        code: [
					{ required: true, message: '验证码不能为空', trigger: 'blur' },
					{ type: 'number', message: '验证码必须为数字'}
				]
      },
      loading: false,
      redirect: undefined,
			disabled: false,
			btnTxt: '获取验证码'
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(res => {
            this.getUserInfo(res)
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getUserInfo(id) {
      getInfo(id).then(res => {
        let pList = res.data.permissionIds
        if(pList.length < 0) {
          this.$message.error('当前用户暂无权限登录')
        } else {
          let path = pathList[pList[0]-1]
          this.$router.push({ path: this.redirect && this.redirect != '/' ? this.redirect : path })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
		//获取验证码
		getCode() {
			// 校验手机号码
			if (!this.loginForm.phone) {
				//号码校验不通过
				this.$message({
					message: '手机号不能为空',
					type:'warning',
				});
				//正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
			} else if (!/1[35789]\d{9}/.test(this.loginForm.phone)) {
				this.$message({
					message: '请输入正确格式手机号',
					type:'warning',
				});
				// 失去焦点后自动触发校验手机号规则
			} else {
        getPhoneCode({phone: this.loginForm.phone}).then(()=>{
          this.$message({
            type: 'success',
            message: '发送成功'
          })
          this.time = 60;
          this.disabled = true;
          //调用倒计时方法
          this.timer();
        }).catch(err=>{
          this.$message({
            type: 'error',
            message: err.msg
          })
        })
			}
		},
		//倒计时方发
		timer() {
			if (this.time > 0) {
				this.time--;
				this.btnTxt = this.time + "s后重新获取";
				setTimeout(this.timer, 1000);
			} else {
				this.time = 0;
				this.btnTxt = "获取验证码";
				this.disabled = false;
			}
		}
  }
}
</script>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  // background-color: $bg;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 420px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      // color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
	::v-deep .el-input__suffix {
		right: 0;
	}
	::v-deep .el-button.is-disabled {
		color: #ffffff;
		cursor: not-allowed;
		background-image: none;
		background-color: #d7d7d7;
		border-color: #EBEEF5;
	}
}
</style>
